<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }
        
        .home-nav {
            margin: 0 auto;
            padding: 30px 0 30px 220px;
            color: #000;
            text-align: center;
            background-color: cadetblue;
        }
        
        h1 {
            font-size: 28px;
        }
        
        .nav {
            position: absolute;
            right: 50px;
            top: 60px;
            cursor: pointer;
        }
        
        .home-name {
            position: absolute;
            top: 0;
            right: 5px;
            font-size: 16px;
            padding: 20px 0;
        }
        
        .logout {
            width: 120px;
            position: absolute;
            top: 37px;
            right: -50px;
            padding: 5px 0;
            font-size: 16px;
            color: #fff;
            background-color: cadetblue;
            display: none;
        }
        
        .home-left {
            width: 220px;
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: cadetblue;
        }
        
        .home-u {
            display: block;
            width: 100px;
            margin: 50px auto;
            padding: 0 50px;
            font-size: 22px;
            color: #fff;
            cursor: pointer;
        }
        
        .home-left div {
            height: 30px;
            margin: 0 auto;
            padding: 10px 50px;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            text-align: center;
            line-height: 30px;
        }
        
        .home-left div:hover {
            color: #000;
            background-color: darkgrey;
        }
        
        .home-left div ul {
            position: absolute;
            left: 0;
            width: 170px;
            padding: 5px 10px 5px 40px;
            background-color: darkgrey;
        }
        
        .home-left div ul li {
            line-height: 30px;
        }
        
        .home-left div ul li:hover {
            color: #fff;
        }
        
        .items {
            margin-left: 220px;
            width: 83%;
            cursor: pointer;
        }
        
        table>thead>tr {
            color: #fff;
            text-align: center;
            background-color: #999;
        }
        
        table>tr {
            margin-top: 10px;
            width: 83%;
            color: #000;
            text-align: center;
            display: flex;
        }
        
        table>tbody>tr:nth-child(1) {
            margin-top: 30px;
        }
        
        table>tbody>tr {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="home-left">
        <sapn class="home-u">XX学校</span>
    </div>
    <div class="home-nav">
        <h1>欢迎进入XX后台管理系统</h1>
        <div class="nav">
            <div class="home-name">XXX</div>
            <div class="logout">退出登录</div>
        </div>
    </div>
    <table class="items">
        <thead>
            <tr>
                <th style="width: 10%;">学号</th>
                <th style="width: 7%;">姓名</th>
                <th style="width: 5%;">班级</th>
                <th style="width: 6%;">年龄</th>
                <th style="width: 5%;">性别</th>
                <th style="width: 18%;">联系方式</th>
                <th style="width: 23%;">身份证号</th>
                <th style="width: 27%;">出生年月</th>
            </tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
    <script src="../javascripts/jquery-2.1.4/jquery.js"></script>
    <script>
        ;
        (function() {
            $('.home-name').hover(function() {
                $('.logout').stop().fadeIn(500);
            }, function() {
                $('.logout').stop().fadeOut(500);
            })
            $('.logout').click(function() {
                localStorage.removeItem('token');
                location.reload();
            })

            $.ajax({
                url: 'http://1.14.68.137:9090/routes',
                headers: {
                    token: localStorage.getItem('token')
                },
                success(result) {
                    // console.log(result);
                    result.reduce((prev, item, index) => {
                        const div = $('<div>');
                        const span = $(`<span> ${item.title}</span>`);
                        span.appendTo(div);
                        if (item.children) {
                            const ul = $(`<ul></ul>`).css('display', 'none');
                            item.children.forEach(item => {
                                const li = $(`<li>${item.c_name}</li>`).attr('id', item.c_id);
                                const u = li.appendTo(ul);
                                u.click(function() {
                                    // console.log(9);
                                    $(this).siblings().removeClass();
                                    $(this).addClass('active');
                                    $('tbody').empty();
                                    $.get(`http://1.14.68.137:9090/getClasses?id=${$(this).attr('id')}`, result => {
                                        // console.log(result);
                                        result.forEach(items => {
                                            let  tr = $("<tr></tr>");                                                
                                            $("<td></td>").text(items.s_id).appendTo(tr);                                                
                                            $("<td></td>").text(items.s_name).appendTo(tr); 
                                            $("<td></td>").text(items.s_class_id).appendTo(tr);                                                
                                            $("<td></td>").text(items.s_age).appendTo(tr);                                                
                                            $("<td></td>").text(items.s_gender).appendTo(tr);                                                
                                            $("<td></td>").text(items.s_phone).appendTo(tr);                                                
                                            $("<td></td>").text(items.s_id_card).appendTo(tr);                                                
                                            $("<td></td>").text(items.s_birth).appendTo(tr);                                                
                                            tr.appendTo($('tbody'));
                                        })
                                    })
                                })
                            })
                            ul.appendTo(div);
                        }
                        div.appendTo($('.home-left'));
                    }, []);

                    $('.home-left span').click(function() {
                        if ($(this).next().length > 0) {
                            $(this).next().stop().slideToggle()
                        } else {
                            $('.home-left div ul').slideUp();
                            $('.home-left div ul').children().removeClass();
                        }
                        $('.home-left div span').removeClass();
                        $(this).addClass('active');
                    })
                }
            });
        })();
    </script>

    <!-- <script>
        (function(){
            const token = localStorage.getItem('token');
            if(!token){
                location.href = 'http://localhost:80';
            }
            $.post('http://1.14.68.137:9090/getUserInfo',{
                token
            })
        })();
    </script> -->
</body>

</html>

</html>